<!-- 场地申请 -->
<template>
  <view class="kjjnnxeert">
    <swiper :indicator-dots="true" class="fgdgtyyxe">
      <swiper-item
        v-for="page in Math.ceil(list.length / 8)"
        :key="'page_' + page"
      >
        <view
          v-for="spage in ((list.length - (page-1) * 8) >= 8
            ? 8
            : list.length - (page-1) * 8)"
          :key="page + spage"
          class="xcxfrrtty"
        >
          <navigator
            class="fgdgdfdtyxe"
            :url="
              '/pages/gongzuo/shenqing/kcsq?topFieldTypeId=' +
              list[(page - 1) * 8 + spage - 1].id
            "
          >
            <view class="dfdsftycer">
              <view class="">
                <image
                  :src="basicURL+list[(page - 1) * 8 + spage - 1].fieldImgAddress"
                  class="cz kjjxeerttx"
                ></image>
                <view class="fz34 cf mt10">
                  {{ list[(page - 1) * 8 + spage - 1].name }}
                </view>
              </view>
            </view>
          </navigator>
          <view class="qc"></view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import store from '../../../../store/index.js'
export default {
  data() {
    return {
        basicURL:'',
    };
  },
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  components: {},
  methods: {},
  mounted() {
      this.basicURL = store.getters.getBasicURL;
    uni.setNavigationBarTitle({
      title: "选择类型",
    });
  },
};
</script>
<style scoped>
.kjjnnxeert {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #3dadeb, #d7e8f8);
  padding-bottom: 140upx;
  /* #ifdef H5 */
  top: 80upx;
  padding-bottom: 228upx;
  /* #endif */
}
.fgdgtyyxe {
  height: 100%;
}
.xcxfrrtty {
  float: left;
  width: 50%;
  padding: 20upx 20upx 0;
}
.fgdgdfdtyxe {
  padding-left: 30upx;
  padding-right: 30upx;
  margin-bottom: 40upx;
}
.dfdsftycer {
  height: 210upx;
  border-radius: 20upx;
  text-align: center;
  color: #fff;
  background: linear-gradient(to bottom, #03a9f4, #c5dbf3);
  box-shadow: 0 0 20upx rgba(0, 0, 0, 0.2);
}
.kjjxeerttx {
  width: 120upx;
  height: 120upx;
  display: inline-block;
  margin-top: 20upx;
}
</style>
